<template>
	<div id="background">
		<img class="logo" :src="logoSrc" alt="">
		<div class="matchName">
			<span v-if="show">{{matchName}}</span>
			<span v-if="!show">暂无比赛信息</span>
		</div>
		<div v-if="show" class="gameInfo">
			<div class="point"></div>
			<span class="status">{{matchStatus}}</span>
			<span class="time">比赛用时: {{gameTime}}</span>
			<img class="timeLogo" src="http://qncdn.tissys.com/admin/assets/image/time.png" alt="">
		</div>
		<div v-if="show" class="pointContainer">
			<div class="topContent">
				<div class="playGround">{{groupName}}——{{groundName}} {{siteNumber}}#</div>
				<ul class="plate">
					<li v-for="item in plateList" class="plate">{{item}}</li>
				</ul>
			</div>
			<div class="bottomContent">
				<div class="orderContainer">
					<div v-if="stage!==''" class="stage">{{stage}}</div>
					<div class="wheel">{{wheel}}</div>
				</div>
				<div class="score">
					<div class="playerContainer">
						<div class="teamA">
							<div class="playerName">{{name_a}} <span v-if="one_limit_a!==''&&one_limit_a!==null&&one_limit_a!=='null'">[{{one_limit_a}}]</span></div>
							<div v-if="matchType=='double'" class="playerName">{{name_b}} <span v-if="one_limit_a!==''&&one_limit_a!==null&&one_limit_a!=='null'">[{{one_limit_a}}]</span></div>
							<div v-if="matchType=='single'&&serve_user==user_id_a" class="serveTeam"></div>
							<div v-if="matchType=='double'&&(serve_user==user_id_a||serve_user==user_id_b)" class="serveTeam"></div>
						</div>
						<div class="teamB">
							<div v-if="matchType=='single'" class="playerName">{{name_b}} <span v-if="one_limit_b!==''&&one_limit_b!==null&&one_limit_b!=='null'">[{{one_limit_b}}]</span></div>
							<div v-if="matchType=='double'" class="playerName">{{name_c}} <span v-if="one_limit_b!==''&&one_limit_b!==null&&one_limit_b!=='null'">[{{one_limit_b}}]</span></div>
							<div v-if="matchType=='double'" class="playerName">{{name_d}} <span v-if="one_limit_b!==''&&one_limit_b!==null&&one_limit_b!=='null'">[{{one_limit_b}}]</span></div>
							<div v-if="matchType=='single'&&serve_user==user_id_b" class="serveTeam"></div>
							<div v-if="matchType=='double'&&(serve_user==user_id_c||serve_user==user_id_d)" class="serveTeam"></div>
						</div>
					</div>
					<ul class="scoreList">
						<li v-for="item in roundList" class="scoreList">
							<div class="topScore">{{item.top}}
								<span v-if="item.tiebreak!==''" class="tiebreak">{{item.tiebreak}}</span>
							</div>
							<div class="botScore">{{item.bot}}
								<span v-if="item.tiebreak!==''" class="tiebreak">{{item.tiebreak}}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<h3 class="systemName">{{systemName}}</h3>
		<img class="light" src="http://qncdn.tissys.com/admin/assets/image/light.png" alt="">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				liveInfo: {},
				show: null,
				matchType:"",
				matchName:"",
				logoSrc:"",
				systemName:"TISSYS网球智能服务系统",
				matchStatus:"",
				gameTime:"",
				plateList:[],
				roundList:[

				],
				groupName:"",
				groundName:"",
				siteNumber:1,
				stage:"",
				wheel:"",
				wheelList:[],
				name_a:"",
				name_b:"",
				name_c:"",
				name_d:"",
				one_limit_a:"",
				one_limit_b:"",
				user_id_a:"",
				user_id_b:"",
				user_id_c:"",
				user_id_d:"",
				serve_user:"",
			}
		},
		created() {
			this.led_info()
		},
		filters: {
			teams(site) {
				return site.split(',')[0]
			},
      wheelName: battle => {
        // 1 是循环+淘汰  3是单淘汰
        if ((battle.com_system == 1 && battle.stage == 2) || battle.com_system == 3) {
          let maxWheel = battle.wheels;
          let wheel = battle.wheel;
          let wheelName = '';
          let field = battle.field
          if (battle.isno == 0) {
            if (wheel == parseInt(maxWheel)) wheelName = '决赛'
            if (wheel == (parseInt(maxWheel) - 1)) wheelName = '半决赛'
          } else {
            // 最后一轮
            if (wheel == parseInt(maxWheel) && field == 1) wheelName = '决赛'
            if (wheel == parseInt(maxWheel) && field == 2) wheelName = '5,6附加赛'
            if (wheel == parseInt(maxWheel) && field == 3) wheelName = '3,4附加赛'
            if (wheel == parseInt(maxWheel) && field == 4) wheelName = '7,8附加赛'
            // 倒数第二轮
            if (wheel == (parseInt(maxWheel) - 1) && (field == 1 || field == 2)) wheelName = '半决赛'
            if (wheel == (parseInt(maxWheel) - 1) && (field == 3 || field == 4)) wheelName = '5 | 8附加赛'
          }
          if (wheel == (parseInt(maxWheel) - 2)) wheelName = '1/4决赛'
          if (wheel < (parseInt(maxWheel) - 2)) wheelName = `第${battle.wheel}轮`

          return wheelName;
        }
        // 2单循环 4循环+循环
        else {
          return `第${battle.wheel}轮`;
        }
      }
		},
		methods: {
			led_info() {
				this.show = true
				this.$axios.post('/LedShow/led_info', {
					com_id: this.$route.query.com_id,
					mark: this.$route.query.mark
				}, {
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				}).then(res => {
					setTimeout(() => {
						if (res.data.code == 2000) {
							this.plateList=[];
							this.show = true
							this.liveInfo = res.data.data
							if(this.liveInfo.clash_info.user_id_a.indexOf(",")==-1){//判断单双打
								this.matchType="single";
							}else{
								this.matchType="double";
							}
							// 初始化运动员姓名和id
							if(this.matchType=="single"){
								this.name_a=this.liveInfo.clash_info.name_a;
								this.name_b=this.liveInfo.clash_info.name_b;
								this.user_id_a=this.liveInfo.clash_info.user_id_a;
								this.user_id_b=this.liveInfo.clash_info.user_id_b;
							}else{
								this.name_a=this.liveInfo.clash_info.name_a.split("/")[0];
								this.name_b=this.liveInfo.clash_info.name_a.split("/")[1];
								this.name_c=this.liveInfo.clash_info.name_b.split("/")[0];
								this.name_d=this.liveInfo.clash_info.name_b.split("/")[1];
								this.user_id_a=this.liveInfo.clash_info.user_id_a.split(",")[0];
								this.user_id_b=this.liveInfo.clash_info.user_id_a.split(",")[1];
								this.user_id_c=this.liveInfo.clash_info.user_id_b.split(",")[0];
								this.user_id_d=this.liveInfo.clash_info.user_id_b.split(",")[1];
							}
							// 比赛logo
							this.logoSrc=this.liveInfo.com_logo;
							// 比赛名称
							this.matchName=this.liveInfo.com_name;
							// 判断比赛的状态
							if(this.liveInfo.status===0||this.liveInfo.status===1){
								this.matchStatus="即将开始";
							}else if(this.liveInfo.status===2){
								this.matchStatus="进行中";
							}else if(this.liveInfo.status===3){
								this.matchStatus="已结束";
							}else if(this.liveInfo.status===4){
								this.matchStatus="比赛暂停";
							}
							// 比赛用时
							this.gameTime=this.liveInfo.game_time;
							// 比赛场地
							this.groupName=this.liveInfo.group_name;
							this.groundName=this.liveInfo.ground_name;
							this.siteNumber=this.liveInfo.site.split(",")[0];
							// 盘数
							var arr=this.liveInfo.round_num;
							for(var i=0;i<arr.length;i++){
								this.plateList.push(i+1);
							}
							this.plateList.push("Pts");
							// 比分
							this.roundList=this.liveInfo.round_num;
							this.roundList.push({
								top:this.liveInfo.score_num.split(":")[0],
								bot:this.liveInfo.score_num.split(":")[1],
								tiebreak:"",
							});
							// 运动员单位
							this.one_limit_a=this.liveInfo.clash_info.one_limit_a;
							this.one_limit_b=this.liveInfo.clash_info.one_limit_b;
							// 发球人
							this.serve_user=this.liveInfo.serve_user;
							// 阶段和轮次
							if(this.liveInfo.com_system===1||this.liveInfo.com_system===4){//1和4才有阶段
								this.stage=this.liveInfo.stage;
								if(this.stage==="1"){
									this.stage="第一阶段";
								}else if(this.stage==="2"){
									this.stage="第二阶段";
								}
							}
							this.wheel="第"+this.liveInfo.wheel+"轮";
						} else {
							this.show = false
						}
						this.led_info()
					}, 3000)
				}).catch(res => {
					console.log(res)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	body{
		width: 100%;
		height: 100%;
	}
	#background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-image:url("https://qncdn.tissys.com/beijing.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #62BDF2;

		img.logo{
			width:120px;
			position:absolute;
			top:2%;
			left:13%;
		}

		div.matchName{
			width:30%;
			height:150px;
			margin:0 auto;
			color:#fff;
			font-size:40px;
			text-align: center;
			display:table;
			span{
				display: table-cell;
				vertical-align: middle;
			}
		}

		div.gameInfo{
			height:50px;
			width:800px;
			margin:0 auto;
			margin-top:50px;
			div.point{
				float:left;
				width:30px;
				height:25px;
				background-color:#67c23a;
			}
			span.status{
				float:left;
				color:#67c23a;
				font-size:28px;
				font-weight:bold;
				margin-left:10px;
				line-height: 25px;
			}
			img.timeLogo{
				float:right;
				width:25px;
				margin-right:20px;
			}
			span.time{
				float:right;
				color:#fff;
				font-size:28px;
				font-weight:bold;
				line-height: 25px;
			}
		}

		div.pointContainer{
			width:80%;
			height:60%;
			min-height:650px;
			margin:0 auto;
			border:1px solid #00A0E9;
			background-color:#0A1020;
			padding:30px;
			opacity:0.8;
			div.topContent{
				display:flex;
				justify-content:space-between;
				width:100%;
				height:120px;
				div.playGround{
					height:100%;
					flex-grow:1;
					margin-right:30px;
					background-color:#191C2B;
					text-align: center;
					line-height: 120px;
					color:#00A0E9;
					font-size:40px;
					font-weight: bold;
				}
				ul.plate{
					height:100%;
					display:flex;
					justify-content: space-between;
					align-items:center;
					li.plate{
						height:100%;
						width:150px;
						background-color:#191C2B;
						border-left:4px solid #272A39;
						text-align: center;
						line-height:120px;
						color:#ADFF2F;
						font-size:48px;
						font-weight: bold;
					}
				}
			}
			div.bottomContent{
				display:flex;
				justify-content: space-between;
				width:100%;
				height:500px;
				// min-height: 400px;
				margin-top:30px;
				div.orderContainer{
					display: flex;
					justify-content: space-around;
					align-items: center;
					width:200px;
					height:100%;
					margin-right:20px;
					border:1px solid #00A0E9;
					div.stage,div.wheel{
						width:50px;
						color:#fff;
						font-size:40px;
						font-weight: bold;
						text-align:center;
					}
				}
				div.score{
					flex-grow:1;
					height:100%;
					display:flex;
					justify-content: space-between;
					border:1px solid #00A0E9;
					div.playerContainer{
						height:100%;
						flex-grow:1;
						div.teamA{
							display: flex;
							position:relative;
							flex-direction: column;
							justify-content: space-around;
							width:calc(100% - 100px);
							height:50%;
							margin:0 auto;
							border-bottom:1px solid #00a0e9;
							div.serveTeam{
								position:absolute;
								width:40px;
								height:40px;
								background-color: #ADFE01;
								border-radius:50%;
								right:-40px;
								top:calc(50% - 20px);
							}
						}
						div.teamB{
							display: flex;
							position:relative;
							flex-direction: column;
							justify-content: space-around;
							width:calc(100% - 100px);
							height:50%;
							margin:0 auto;
							div.serveTeam{
								position:absolute;
								width:40px;
								height:40px;
								background-color: #ADFE01;
								border-radius:50%;
								right:-40px;
								top:calc(50% - 20px);
							}
						}
						div.playerName{
							font-size:60px;
							color:#fff;
							font-weight: bold;
							span{
								font-size:40px;
								font-weight: normal;
							}
						}
					}
					ul.scoreList{
						height:100%;
						display:flex;
						justify-content: space-between;
						align-items:center;
						li.scoreList{
							height:100%;
							width:152px;
							text-align: center;
							border-left:1px solid #00a0e9;
							div.topScore{
								position:relative;
								height:50%;
								line-height:250px;
								font-size:100px;
								font-weight:bold;
								color:#F6FE01;
								border-bottom:1px solid #00a0e9;
								span.tiebreak{
									position:absolute;
									height:50px;
									font-size:50px;
									color:#F6FE01;
									right:15px;
									top:50px;
									line-height:50px;
								}
							}
							div.botScore{
								position:relative;
								height:50%;
								line-height:250px;
								font-size:100px;
								font-weight:bold;
								color:#F6FE01;
								span.tiebreak{
									position:absolute;
									height:50px;
									font-size:50px;
									color:#F6FE01;
									right:15px;
									top:50px;
									line-height:50px;
								}
							}
						}
						li.scoreList:last-child>div{
							color:#FEA700;
						}
					}
				}
			}
		}

		h3.systemName{
			position: absolute;
			bottom:50px;
			width:300px;
			text-align: center;
			color:#fff;
			font-size:24px;
			left:calc(50% - 150px);
		}

		img.light{
			position: absolute;
			bottom:20px;
			left:calc(50% - 114px);
		}
		.title {
			color: #AAAAAA;
			font-size: 28px;
			margin: 24px 0 29px 0;
			padding-bottom: 24px;
			padding-left: 58px;
			border-bottom: 1px #571e1c solid;
		}

		.main {
			margin: 32px;
			border: 5px #B43E3A solid;
		}

		.group_name {
			font-size: 80px;
			font-weight: 600;
			margin-top: 10px;
			margin-left: 216px;
			// margin-top: 10%;
			// margin-left: 23%;
			margin-bottom: 20px;
		}

		.flex {
			display: flex;

			.match_name {
				position: relative;
				border-left: 5px #B43E3A solid;
				width: 90%;

				&:after {
					content: '';
					position: absolute;
					width: 100%;
					top: 50%;
					border-bottom: 3px dotted #b43e3a;
				}

				.name_a,
				.name_b {
					font-size: 100px;
					font-weight: 700;
					display: flex;
					justify-content: space-between;

					.name {
						display: flex;
						align-items: center;
						padding: 50px 33px;

						.serve {
							display: inline-block;
							width: 60px;
							height: 60px;
							border-radius: 50%;
							background: #8BC34A;
							font-size: 65px;
							margin-left: 20px;
						}
					}

					.score {
						display: flex;
						// width: 50%;
						width: auto;

						.round_num {
							height: 100%;
							font-size: 300px;
							font-weight: bold;
						}

						.point {
							position: relative;
							// width: 125px;
							width: 200px;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-left: 3px dotted #b43e3a;

							// border-bottom: none;
							i {
								position: absolute;
								// top: 10px;
								// right: 20px;
								// font-size: 70px;
								top: -16px;
								right: 5px;
								font-size: 98px;
							}
						}

						.point_fz {
							width: 400px;
						}

						.score_num {
							display: flex;
							align-items: center;
							justify-content: center;
							// width: 125px;
							// width: 200px;
							width: 320px;
							border: 3px dotted #b43e3a;
							height: 100%;
							font-size: 300px;
							font-weight: bold;
						}

						.score_num_let {
							width: 320px;
							letter-spacing: -10px;
							justify-content: start;
						}

						.score_num_fz {
							width: 300px;
							// font-size: 250px;

						}
					}
				}

				.name_a .score {
					.round_num {
						.point {
							border-top: 3px dotted #b43e3a;
						}
					}

					.score_num {
						border-bottom: none;
					}
				}

				.name_b .score {
					.round_num {
						.point {
							border-bottom: 3px dotted #b43e3a;
						}
					}

					.score_num {
						border-top: none;
					}
				}
			}
		}

		.area {
			font-size: 72px;
			margin-left: 42px;
			// margin-left: 14.1%;
			margin-right: 29px;
			width: 75px;
			display: flex;
			align-items: center;
			text-align: center;
		}

		.round {
			font-size: 72px;
			width: 75px;
			display: flex;
			align-items: center;
			text-align: center;
			margin-right: 29px;
		}

		.matchTime {
			// margin-left: 216px;
			margin-left: 216px;
			margin-top: 42px;
			margin-bottom: 20px;
			// margin-bottom: 10%;
			font-size: 72px;
		}
	}
</style>
